<!-- 品牌列表组件使用说明 -->
<!-- 
	该组件用于 品牌列表、排行榜列表
	在排行榜列表中不显示国家图标
	ranking 有参数的情况下不显示国家图标
	ranking 也用于排行榜的数字累加
 -->
<template>
	<view class="brand_box">
		<view class="logo_box">
			<image class="country" v-if="!ranking" :src="item.country"></image>
			<view class="ranking" v-if="ranking">{{ranking}}</view>
			<image class="seller_logo" :src="item.logo"></image>
		</view>
		<view class="brand_info">
			<span class="classname">{{item.name}}</span>
			<!--<view class="review">好评率:{{item.review}}%</view>-->
			<view class="sales-share">
				<view class="sales"><i class="coolc icon-faxian"></i><span>销量{{item.sale}}</span></view>
				<view class="share"><i class="coolc icon-shangpin"></i><span>共{{item.count}}件宝贝</span></view>
			</view>
			<view class="enter_seller"><span>进店</span></view>
		</view>
	</view>
</template>

<style lang="scss">
.brand_box {
	width:100%; height:auto; display:table; clear:both; padding:26upx 26upx 0 26upx; position:relative;
	
	.logo_box { 
		width:220upx; height:153upx; border:1px solid #eeeeee; float:left; position:relative; overflow:hidden;
		image { width:220upx; height:153upx; }
		.country { width:26upx; height:26upx; position:absolute; left:15upx; top:15upx; z-index:9; }
		.ranking { width:18px; height:27px; line-height:20px; color:#ffffff; font-size:12px; text-align:center; position:absolute; z-index:9; left:12upx; top:0px; display:block; background:url(/static/img/bg/sprite.png) no-repeat 0 -87px; }
	 }
	 
	 .brand_info { 
		display:block; position:absolute; left:268upx; right:26upx;
		.classname { width:100%; height:63upx; line-height:30upx; display:block; font-size:$font-base; }
		.review { width:100%; height:36upx; font-size:$font-sm; color:#cccccc; }
		.sales-share { 
			width:100%; height:47upx; clear:both;
			 
			.coolc { margin-right:12upx; font-size:$font-sm; }
			.sales { float:left; padding-right:24upx; color:#cccccc; font-size:$font-sm; }
			.share { float:left; color:#cccccc; font-size:$font-sm; }
		}
		.enter_seller { 
			width:100%; height:42upx; clear:both; padding-top:2upx;
			span { width:80upx; height:40upx; line-height:40upx; text-align:center; display:block; background:#8c0027; color:#ffffff; font-size:$font-sm;  }
		}
	 }
}
.brand_box:nth-child(1) .ranking { background:url(/static/img/bg/sprite.png) no-repeat 0 0px; }
.brand_box:nth-child(2) .ranking { background:url(/static/img/bg/sprite.png) no-repeat 0 -29px; }
.brand_box:nth-child(3) .ranking { background:url(/static/img/bg/sprite.png) no-repeat 0 -58px; }
</style>
<script>
export default {
	data() {
		return {

		}
	},
	props:{
		item:{
			type: Object
		},
		ranking:{
			type: Number,
			default: 0
		}
	},
	
	methods: {

	}
}
</script>